<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
</head>
<body>
  <button id="btn">点击提示按钮文本(原生)</button>
  <a href="http://www.baidu.com" id="aa">去百度</a>
  <hr>

  <div id="root"></div>

  <script>
    /* 使用原生DOM语法 */
    const button = document.getElementById('btn')
    button.onclick = function (event) {
      console.log(event)
      alert(event.target.innerHTML)
    }
    document.getElementById('aa').onclick = function (event) {
      event.preventDefault() // 阻止事件默认行为 => 跳转
      alert('---')
    }
  </script>
  <script type="text/babel">
    /* 
    绑定事件监听: onXxx={处理函数}   注意事件名首字母是大写的, 值是处理函数(不能是字符串)
    React的事件对象: 包装原生事件的合成事件
        nativeEvent: 原生事件对象
        处理好了浏览器的兼容性问题
        有原生事件对象上的绝大部分属性
        input的change事件
          原生: 失去焦点时才触发
          react: 输入发生改变时触发? => 包装的不是原生change事件, 而是input事件
        其它事件都是对应的包装
        阻止事件的默认行为: event.preventDefault()
    */

    function handleClick (event) {  // react中的click包装就是原生的click
      console.log(event) 
      alert(event.target.innerHTML)
    }

    function handleChange(event) { // react的Change事件包装是原生的input事件
      console.log(event)
      console.log(event.target.value)
    }

    function handleClick2(event) {
      // 当前时间是奇数不跳转
      if (Date.now()%2==1) {
        event.preventDefault() // 阻止事件默认行为 => 跳转
      } 
      alert('+++')
    }

    // 使用jsx创建虚拟DOM
    const vDom = (
      <div>
        <button onClick={handleClick}>点击提示按钮文本</button>
        <input type="text" onChange={handleChange}/><br />
        <a href="http://www.baidu.com" onClick={handleClick2}>去百度(当前时间是奇数不跳转)</a>
      </div>
    )
    
     ReactDOM.render(vDom, document.getElementById('root'))
  </script>
</body>
</html>